<template>
	<view>
		<u-navbar :back-icon-color="backIcon" :border-bottom="false" immersive :background="background">
			<view class="search-box" @tap="navTogoodsList()"
				:style="[{width: navbarWidth + 'rpx'}, {marginLeft: navbarMarginLeft + 'rpx'},{'background-color': navbarBgc}]">
				<u-icon :color="searchIcon" name="search"></u-icon>
				<text :style="[{opacity: opacity},{display: textDiaplay}]">请输入商品名</text>
			</view>
		</u-navbar>
		<view class="img-box" :style="{background: 'url' + '(' + shopInfo.bgimageUrl + ') no-repeat'}"></view>
		<view class="store-box px-30 pt-32">
			<view class="font-32 font-bold flex items-center justify-between">
				<view class="">
					{{ shopInfo.name }}
				</view>
				<view class="mr-16">
					<u-icon color="#e29c51" :name="isCollect == true ? 'star-fill' : 'star'" @click="isCollectClick()"></u-icon>
				</view>
			</view>
			<view class="evaluation-box mt-16">
				<view class="score">
					<template v-if="shopInfo.score">
						<view>
							<u-icon size="24" name="star-fill"></u-icon>
							<text class="ml-6">{{ shopInfo.score }}</text>
						</view>
					</template>
					<template v-else>
						<text>暂无评分</text>
					</template>
				</view>
				<text class="sales ml-24">销量{{ shopInfo.salesVolume }}</text>
				<text class="delivery ml-24">配送 ¥{{ shopInfo.deliveryPrice }}</text>
			</view>
			<u-collapse-item :title="item.head" v-for="item in itemList" @change="changeColl">
				{{item.body}}
			</u-collapse-item>
		</view>
		<u-sticky>
			<u-tabs :list="tabList" font-size="28" active-color="#e29c51" :current="current" @change="tabChange"></u-tabs>
		</u-sticky>
		<view class="content" v-show="current === 0">
			<u-sticky offset-top="82">
				<scroll-view scroll-y class="left-aside">
					<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id == currentId}"
						@click="tabtap(item)">
						{{item.name}}
					</view>
				</scroll-view>
			</u-sticky>
			<scroll-view scroll-with-animation scroll-y id="right-asides" class="right-aside" @scroll="asideScroll"
				:scroll-top="tabScrollTop">
				<view v-for="(item, index) in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
					<view class="t-list">
						<view @click="navToList(item.id)" class="guess-item">
							<view class="image-wrapper">
								<image :src="$ut.setImgae(item.image)" mode="aspectFill"></image>
							</view>
							<view class="content-box">
								<view class="title line-1 font-bold">{{item.name}}</view>
								<view class="evaluation-box mt-8">
									<view class="score font-24">
										<u-icon v-if="item.score" size="24" name="star-fill"></u-icon>
										<text>{{ item.score || '暂无评' }}</text>
									</view>
									<text class="sales ml-12">销量{{ item.salesVolume }}</text>
								</view>
								<view class="mt-8 flex items-center">
									<u-tag v-if="item.evaluateTemplate == null" text="暂无评价" size="mini" type="warning"></u-tag>
									<template v-else>
										<template v-for="(items, key) in setTagtoArr(item.evaluateTemplate)">
											<u-tag class="mr-4" :key="key" v-if="key < 3" :text="items" size="mini" type="warning" />
										</template>
									</template>
								</view>
								<view class="font-24 flex items-center justify-between mt-8" style="height: 42rpx;">
									<view class="flex items-end font-32">
										<u-parse :style="{color: isVip && isOpenSave == 1 ? '#FF0909' : '#333'}"
											:html="decimalPoint( isVip && isOpenSave == 1 ? item.memberPrice : item.originalPrice || 0)"></u-parse>
										<view v-if="isVip && isOpenSave == 1" class="font-24 pb-2 ml-12" style="text-decoration: line-through;">
											￥{{ item.originalPrice }}</view>
									</view>
									<view v-if="!isShopClose">
										<template
											v-if="item.shopCommoditySpecsTypeList == null || item.shopCommoditySpecsTypeList.length == 0">
											<u-number-box v-if="item.hasOwnProperty('number') && item.number != 0" v-model="item.number"
												size="24" input-width="50" :min="0" disabled-input :index="index" @change="listGoodsChange">
											</u-number-box>
											<view v-else @click.stop="addCar(item, index)">
												<u-icon size="36" color="#2979ff" name="plus-circle-fill"></u-icon>
											</view>
										</template>
										<template v-else>
											<template>
												<view class="sku-box-btn" @click.stop="showSkuBoxClick(item)">选规格</view>
											</template>
										</template>
									</view>
								</view>
								<view class="font-24 flex items-center mt-8 flex" v-if="!isVip && isOpenSave == 1">
									<view class="price font-32">{{item.memberPrice}}</view>
									<u-image width="16" height="28" src="/static/pirce_icon.png"></u-image>
									<view class="savingsPrice-box">储蓄价</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="current === 1">
			<view class="px-30 bgc-white my-24 py-32 flex items-center justify-between">
				<view class="flex items-center mr-54">
					<u-icon name="map" size="32"></u-icon>
					<view class="line-2 ml-24">{{shopInfo.address}}</view>
				</view>
				<u-icon name="phone-fill" @click="callTel(shopInfo.phone)"></u-icon>
			</view>
			<view class="px-30 bgc-white my-24 py-32 flex items-center">
				<u-icon name="order" size="32"></u-icon>
				<view class="line-1 ml-24">主营业务： {{shopInfo.mainBusiness}}</view>
			</view>
			<view class="px-30 bgc-white my-24 py-32 flex items-center">
				<u-icon name="clock" size="32"></u-icon>
				<view class="line-1 ml-24">配送时间： {{shopInfo.tradeBeginHour}}-{{shopInfo.tradeEndHour}}</view>
			</view>
			<view class="px-30 bgc-white my-24 py-32 flex items-center">
				<u-icon name="share" size="32"></u-icon>
				<view class="line-2 ml-24">店铺介绍： {{shopInfo.introduction}}</view>
			</view>
			<view class="px-30 bgc-white my-24 py-32">
				<view class="flex items-center mb-12">
					<u-icon name="bookmark" size="32"></u-icon>
					<text class="ml-24">营业执照：</text>
				</view>
				<view class="ml-24">
					<u-image width="640" :src="shopInfo.businessLicense[0]" mode="widthFix"></u-image>
				</view>
			</view>
			<view class="px-30 bgc-white my-24 py-32">
				<view class="flex items-center mb-12">
					<u-icon name="bookmark" size="32"></u-icon>
					<text class="ml-24">经营许可证：</text>
				</view>
				<view class="ml-24">
					<u-image width="640" :src="shopInfo.operatePermit[0]" mode="widthFix"></u-image>
				</view>
			</view>
		</view>

		<!-- 储蓄 -->
		<template v-if="current === 2">
			<view class="debitCard-box" :class="{'grayscale': isOpenSave == 0}">
				<view class="debitCard-style">
					<view class="cir-box">
						<view class="cir">
							<u-icon color="#fb2f2f" size="48" name="rmb"></u-icon>
						</view>
						<view class="">
							储蓄卡
						</view>
					</view>
					<view class="saveMoney">
						<u-count-to :start-val="0" color="#fff" :end-val="balance" separator="," :decimals="2"></u-count-to>
					</view>
					<view class="shop-name">{{ shopInfo.name }} · 储蓄卡</view>
				</view>
				<template v-if="flowMoneyConsumptionData.length == 0 && isOpenSave == 1">
					<view class="m-30">
						<u-button @click="$ut.route('pages/money/recharge',{shopId})">储蓄充值</u-button>
					</view>
				</template>
				<scroll-view scroll-y class="scroll-Y">
					<view class="list-box flex items-center justify-between mx-32 mt-30 p-24"
						v-for="item in flowMoneyConsumptionData" :key="item.id">
						<view class="flex items-center">
							<view class="store-icon flex items-center justify-center">
								<u-icon :name="item.type == 0 ? 'shopping-cart' : 'bookmark'"></u-icon>
							</view>
							<view class="ml-20">
								<view class="font-30 font-bold">{{item.type == 0 ? '消费' : '充值'}}</view>
								<view class="font-24" style="color: #999;">{{item.createTime}}</view>
							</view>
						</view>
						<view style="color: #FF0909;" v-if="item.type == 0">
							-<text class="price font-28">{{item.money}}</text>
						</view>
						<view style="color: #00aa00;" v-else>
							+<text class="price font-28" style="color: #00aa00;">{{item.money}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</template>

		<template v-if="current == 3">
			<!-- 评价 -->
			<template v-if="commodityEvaluateList.length !== 0">
				<view v-for="(item,index) in commodityEvaluateList" :key="index">
					<view class="eva-section">
						<view class="e-header flex items-center justify-between" v-if="index == 0">
							<view>
								<text class="tit">评价</text>
								<text>({{ commodityEvaluateList.length }})</text>
							</view>
							<u-rate :count="5" v-model="item.allRating" active-color="#f0ad4e" active-icon="thumb-up-fill"></u-rate>
							<!-- <text class="yticon icon-you"></text> -->
						</view>
						<view class="eva-box">
							<u-avatar v-if="item.image"
								:src="item.isAnonymous == 0 ? $ut.setImgae(item.image) : ''"></u-avatar>
							<view class="right">
								<text class="name">{{ item.isAnonymous == 0 ? item.userInfo.name : '匿名用户' }}</text>
								<text class="con">{{ item.content }}</text>
								<image v-if="item.image" class="portrait" :src="$ut.setImgae(item.image)"
									mode="aspectFill" @click="$ut.previewImage(item.image)"></image>
								<view class="bot">
									<text class="attr">规格：小份</text>
									<text class="time">{{ item.createTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</template>
		<!-- 购物车弹窗 -->
		<u-popup v-model="carShow" safe-area-inset-bottom mode="bottom" border-radius="20">
			<view class="my-30 flex justify-end mr-30 font-24" @tap="clearCartClick()">
				<u-icon name="trash"></u-icon>
				<text class="ml-12">清空购物车</text>
			</view>
			<view class="line mx-30"></view>
			<scroll-view scroll-y class="scroll-Y">
				<view v-if="cartLoading">
					<fui-load-ani></fui-load-ani>
				</view>
				<template v-if="!cartLoading">
					<view v-for="(item, index) in $store.state.carList" :key="index" class="s-list">
						<view class="t-list">
							<view class="guess-item">
								<view class="image-wrapper">
									<image :src="$ut.setImgae(item.image)" mode="aspectFill"></image>
								</view>
								<view class="content-box">
									<view class="title line-1 font-bold">{{item.name}}</view>
									<view class="font-24 mt-6">{{item.commoditySpecs}}</view>
									<view class="font-24 flex items-center justify-between">
										<view class="flex items-end font-32">
											<u-parse style="color: #FF0909;"
												:html="decimalPoint(isVip ? item.memberPrice : item.originalPrice)"></u-parse>
											<view class="font-24 pb-2 ml-12" v-if="isVip" style="text-decoration: line-through;">
												￥{{ item.originalPrice }}</view>
										</view>
										<u-number-box v-model="item.number" :min="0" size="24" :index="index" input-width="50"
											disabled-input @change="listcartChange"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
			<view style="width: 100%;height: 180rpx;" />
		</u-popup>
		<!-- 规格弹窗 -->
		<u-popup v-model="skuBoxShow" safe-area-inset-bottom mode="center" border-radius="20" closeable>
			<view class="sku-box mb-30">
				<view class="my-24 px-30 font-32 font-bold mb-50">{{ skuGoodsName }}</view>
				<view class="px-30" v-for="(skuType, typeKey) in skuList" :key="typeKey">
					<view class="font-bold mb-24">{{ skuType.name }}</view>
					<block v-for="(sku, key) in skuType.shopCommoditySpecsList">
						<view class="tag-box" :class="{'is-current' : skuIdList.some(item => item.skuId == sku.id)}"
							@tap="changeSkuId(sku, typeKey, key)">
							<text class="tag-name py-8">{{sku.name}}</text>
							<text class="mx-12" v-if="sku.originalPrice"> | </text>
							<text class="tag-price py-8" v-if="sku.originalPrice">{{sku.originalPrice}}</text>
						</view>
					</block>
				</view>
				<view class="mt-20 font-24 px-30 py-20 mb-40 chooice-box">
					<text style="color: #999;">已选规格:</text>
					<text class="ml-4 font-bold">{{ getCurrentSkuName }}</text>
				</view>
				<view class="px-30 flex justify-between items-center">
					<view>总计：
						<text class="price font-38">{{ isVip ? currentSkuMemberPrice : currentSkuPrice }}</text>
						<text class="font-24 ml-12" v-if="isVip" :class="{ 'sku-price' : isVip }">{{ currentSkuPrice }}</text>
					</view>
					<view class="add-cart-btn">
						<u-button type="warning" size="mini" class="no-border confirm-btn" @click.stop="addCartClick">+
							加入购物车</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 底部菜单栏 -->
		<view v-if="current == 0" class="action-section" :class="{isShopClose}"
			@click="isShopClose ? $u.toast('店铺已打烊') : carShow = !carShow">
			<template v-if="!isShopClose">
				<view class="total-box">
					<text class="price">{{ allPrice }}</text>
					<text class="coupon" v-if="isVip">
						已优惠
						<text>{{preferentialPirce}}</text>
						元
					</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click.stop="createOrder">去结算</button>
			</template>
			<template v-else>
				<view>
					亲，店铺打烊了~
				</view>
			</template>
		</view>
		<u-modal v-model="loginShow" title="温馨提示" content="检测到您未登录,请前去登录" show-cancel-button
			@confirm="$ut.route('/pages/public/login')"></u-modal>

		<u-modal v-model="isOpenSaveShow" content="店铺未开通储蓄功能" confirm-text="我已知晓"
			@confirm="isOpenSaveShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		mapMutations
	} from 'vuex';
	// 混入引入搜索框变换，以免干扰页面其他逻辑
	import searchData from '@/common/mixins/searchData.js';
	export default {
		data() {
			return {
				loginShow: false, // 是否去登录
				isOpenSaveShow: false, // 不是储蓄店铺时候的提示
				sizeCalcState: false,
				isCollect: false, // 是否收藏
				carShow: false, // 购物车显隐
				carList: [], // 购物车列表
				tabScrollTop: 0,
				shopId: null, // 店铺id
				currentId: 1,
				flist: [],
				slist: [],
				tlist: [],
				// 
				tabList: [{
					name: '商品'
				}, {
					name: '商家',
				}, {
					name: '储蓄'
				}, {
					name: '评价'
				}],
				itemList: [{
					head: "公告",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: false
				}],
				headStyle: {},
				current: 0,
				shopInfo: {}, //店铺信息
				isVip: false, // 是否为会员
				isOpenSave: 0, // 是否为储蓄店铺
				isShopClose: false, // 商家是否打烊了
				cartLoading: false, // 购物车页面重载事件辅助动画
				// 规格
				skuBoxShow: false, // 显隐
				balance: 0, // 店铺储蓄余额
				skuList: [], // 规格数据
				skuGoodsName: '', // 选中的商品的名字
				skuIdList: [], // 选中的sku
				commodityEvaluateList: [], // 店铺评价
				flowMoneyConsumptionData: [] ,// 店铺储蓄消费
				commodityId: null,// 推荐商品或店铺点进来时候的商品id
				commodityTypeId: null,// 推荐商品或店铺点进来时候的商品分类id
			}
		},
		watch: {
			skuBoxShow(val) {
				// 每次选规格需要制空，否则会出现重复规格，当然此处也可以用数组查重，但没必要再多次循环，看后期业务需要
				if (!val) return this.skuIdList = [];
			},
			'this.$store.state.carList': {
				handler: (oldVal, newVal) => {
					console.log(oldVal, newVal)
				},
				// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
				deep: true
			},
			// 监听tab key
			current(val) {
				if (val === 3) {
					// 获取店铺评价
					this.getShopCommodityEvaluateUserByShop();
				}
				if (val === 2) {
					if (this.hasLogin) {
						this.getSaveInfo();
					}
				}
			},
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			// 总价
			allPrice() {
				let price = 0;
				this.$store.state.carList.forEach(item => {
					if (this.isVip) {
						price += Number(item.memberPrice) * Number(item.number)
					} else {
						// isInSave 如果参与了打折，那么这个地方的系数就要改变了(后台已经处理好了)
						// 规格中已经处理了，直接加上原价即可
						price += Number(item.originalPrice) * Number(item.number)
					}

				})
				price = Number(price.toFixed(2));
				return price
			},
			// 总优惠价
			preferentialPirce() {
				let price = 0;
				this.$store.state.carList.forEach(item => {
					price += (Number(item.originalPrice) - Number(item.memberPrice)) * Number(item.number);
				})
				price = Number(price.toFixed(2));
				return price
			},
			// 计算当前选中的sku的名字
			getCurrentSkuName() {
				let allName = '';
				this.skuIdList.forEach((item, key) => {
					allName += `${item.skuName}${this.skuIdList.length == key + 1 ? '' : '、'}`;
				})
				return allName;
			},
			// 计算当前选中的sku的价格
			currentSkuPrice() {
				let price = 0;
				this.skuIdList.forEach((item, key) => {
					price += item.originalPrice
				})
				return price
			},
			// 计算当前选中的sku是会员的价格
			currentSkuMemberPrice() {
				let price = 0;
				this.skuIdList.forEach((item, key) => {
					price += item.memberPrice
				})
				return price
			}
		},
		onLoad(options) {
			// 每次进入新的店铺都需要重置购物车，不然会出现错乱
			this.$store.state.carList = [];
			const id = options.id;
			this.shopId = options.id;
			this.getShopInfoUserData(id);
			this.getShopCommodityTypeUserData(id);
			if(options.commodityId){
				// 当有商品id的时候需要做一些处理
				this.commodityId = options.commodityId;
				this.commodityTypeId = options.commodityTypeId;
			}
		},
		onShow() {
			// 仅在登录后获取店铺,可能存在此处登录，所以放在onshow
			if (this.hasLogin) {
				this.getShopCollect();
				this.getShopSaveUser();
			}
		},
		methods: {
			// 获取消费相关的
			getSaveInfo() {
				this.getShopSaveUserBalance();
				this.getFlowMoneyConsumptionToShopSaveUser();
			},
			// 获取用户在店铺的储蓄消费
			getFlowMoneyConsumptionToShopSaveUser() {
				this.$u.api.getFlowMoneyConsumptionToShopSaveUser({
					shopId: this.shopInfo.id,
					userId: this.userInfo.id
				}).then(res => {
					this.flowMoneyConsumptionData = res.dataList;
				})
			},
			// 获取用户在本店铺储蓄余额
			getShopSaveUserBalance() {
				this.$u.api.getShopSaveUserBalance({
					shopId: this.shopInfo.id,
					userId: this.userInfo.id
				}).then(res => {
					this.balance = res.data;
				})
			},
			// 获取店铺评价
			getShopCommodityEvaluateUserByShop() {
				this.$u.api.getShopCommodityEvaluateUser({
					shopId: this.shopId
				}).then(res => {
					if (res.dataList != null) this.commodityEvaluateList = res.dataList;
				})
			},
			// 是否店铺储蓄用户
			getShopSaveUser() {
				this.$u.api.getShopSaveUser({
					shopId: this.shopId,
					userId: this.userInfo.id
				}).then(res => {
					if (res.dataList.length === 0) return this.isVip = false;
					else this.isVip = true;
				})
			},
			// 获取店铺收藏
			getShopCollect() {
				this.$u.api.getShopCollect({
					userId: this.userInfo.id,
					shopId: this.shopId
				}).then(res => {
					if (res.dataList.length === 0) this.isCollect = false;
					else this.isCollect = true;
				})
			},
			// 收藏店铺
			isCollectClick() {
				uni.showLoading({
					title: this.isCollect === true ? '取消收藏中...' : '收藏中...'
				})
				if (!this.isCollect) {
					// 没收藏就去收藏
					this.$u.api.addShopCollect({
						userId: this.userInfo.id,
						shopId: this.shopId
					}).then(res => {
						uni.hideLoading();
						this.isCollect = !this.isCollect;
						uni.showToast({
							title: '收藏成功'
						})
					})
				} else {
					// 收藏了就去掉收藏
					this.$u.api.deleteShopCollect({
						userId: this.userInfo.id,
						shopId: this.shopId
					}).then(res => {
						uni.hideLoading();
						this.isCollect = !this.isCollect;
						uni.showToast({
							title: '取消收藏成功'
						})
					})
				}

			},
			// 购物车结算
			async createOrder() {
				if (!this.hasLogin) return this.loginShow = true;
				if (this.$store.state.carList.length == 0) return this.$u.toast('请选择至少一个商品');
				await this.$store.state.carList.forEach(item => {
					if (item.shopCommoditySpecsTypeList !== null && item.shopCommoditySpecsTypeList.length == 0) {
						item.carShopCommoditySpecsIdList = this.setCarShopCommoditySpecsIdList(item
							.shopCommoditySpecsTypeList);
					}
				})
				const data = {
					carOrderTakeawayCommodityDtoList: this.$store.state.carList,
					carShopId: this.shopInfo.id
				}
				this.$u.api.countCarOrderIntegral(data).then(res => {
					this.$ut.route('/pages/order/createOrder', {
						carList: encodeURIComponent(JSON.stringify(this.$store.state.carList)),
						shopInfo: encodeURIComponent(JSON.stringify(this.shopInfo)),
						isVip: this.isVip,
						shopInfoName: this.shopInfo.name
					});
				})
			},
			//整理存在规格的商品的id为一个集合
			setCarShopCommoditySpecsIdList(arr) {
				let ids = [];
				arr.forEach(list => {
					list.forEach(item => {
						ids.push(item.id);
					})
				})
				return ids;
			},
			// 规格弹窗中加入购物车
			addCartClick() {
				// 深拷贝对象，直接取第一个即可，因为只要有规格，第一个就一定会有数据，并且第一个就是该规格所指向的商品相关信息
				let skuIdList = JSON.parse(JSON.stringify(this.skuIdList))
				// 添加规格集合和商品id
				let skubyCartObj = Object.assign({
					carShopCommoditySpecsIdList: [],
					commoditySpecs: this.getCurrentSkuName,
					commodityId: skuIdList[0].goodsInfo.id
				}, skuIdList[0].goodsInfo);
				// 将商品
				// 有规格的商品，需要先将规格的价格置0
				skubyCartObj.originalPrice = 0;
				skubyCartObj.memberPrice = 0;
				skuIdList.forEach(item => {
					// 添加规格的时候就已经计算了是否是会员价，此处无需再次判断
					skubyCartObj.originalPrice += Number(item.originalPrice);
					skubyCartObj.memberPrice += Number(item.memberPrice);
					// 规格的集合
					skubyCartObj.carShopCommoditySpecsIdList.push(item.skuId);
				})
				// 如果购物车数组为0，则没有其他商品
				if (this.$store.state.carList.length == 0) {
					this.$store.state.carList.push({
						...skubyCartObj,
						number: 1
					});
				} else {
					// 如果不为0则购物车本身就有商品了
					// 先尝试去找有无索引，找到索引，则购物车中已存在该商品，否则没有
					const index = this.checkIsSameSkuGoods(skubyCartObj, this.$store.state.carList)
					if (index == -1) {
						// 不存在直接push到最后
						this.$store.state.carList.push({
							...skubyCartObj,
							number: 1
						});
					} else {
						// 存在直接+1
						this.$store.state.carList[index].number += 1;
					}
				}
				this.skuBoxShow = false;
				this.$forceUpdate();
			},
			// 判断是不是同一个商品下同一个规格
			checkIsSameSkuGoods(skuObj, carList) {
				const skuCarShopCommoditySpecsIdString = skuObj.carShopCommoditySpecsIdList.join(',');
				let index = -1;
				try {
					carList.forEach((item, key) => {
						// 需要判断规格是否存在
						if (item.hasOwnProperty('carShopCommoditySpecsIdList')) {
							if (skuCarShopCommoditySpecsIdString == item.carShopCommoditySpecsIdList.join(',')) index = key;
						} else {
							if (skuCarShopCommoditySpecsIdString == item.commodityTypeId) index = key;
						}
					})
				} catch (err) {
					console.log(err, '此处可能存在逻辑错误，抛出错误防止控制台暴红并更好定位错误');
				}
				return index;
			},
			// 切换选择sku
			changeSkuId(sku, typeKey, skuKey) {
				const {
					originalPrice,
					memberPrice,
					name,
					id
				} = sku;
				this.skuIdList.forEach(item => {
					// 先确认是哪一个类型，类型是不会切换的
					if (item.typeKey == typeKey) {
						item.skuId = id;
						item.skuKey = skuKey;
						item.skuName = name;
						// 会员价和原价需要全程带上
						item.originalPrice = originalPrice;
						item.memberPrice = memberPrice;
					}
				})
			},
			// 显示sku数据的popup
			showSkuBoxClick(info) {
				console.log(info);
				const {
					id,
					name,
					shopCommoditySpecsTypeList,
					isInSave // 是否储蓄
				} = info;
				// 赋值当前商品名到popup弹窗
				this.skuGoodsName = name;
				// 数据深拷贝
				this.skuList = JSON.parse(JSON.stringify(shopCommoditySpecsTypeList));
				console.log(this.skuList);
				// 取每个类型第一个到选中的sku id数组中
				this.skuList.forEach((item, typeKey) => {
					// 先确定有相应规格
					if (item.shopCommoditySpecsList.length > 0 && item.shopCommoditySpecsList.length != null) {
						// 默认一定取的第一个,赋值一个规格对象
						const shopCommoditySpecsObj = item.shopCommoditySpecsList[0];
						this.skuIdList.push({
							// 记录标记位防止重复记录id
							commodityId: id, // 商品id
							goodsName: name, // 商品名称
							skuName: shopCommoditySpecsObj.name, // 规格名称
							memberPrice: shopCommoditySpecsObj.memberPrice, // 规格会员价
							originalPrice: shopCommoditySpecsObj.originalPrice, // 规格原价
							typeKey, // 规格类型索引
							skuKey: 0, // 规格索引,第一次赋值一定是第一个
							skuId: shopCommoditySpecsObj.id, // 规格id
							isInSave, // 是否参与储蓄
							goodsInfo: info // 当前规格信息
						});
					}
				})
				this.skuBoxShow = true;
			},
			// 数据格式处理,由于uni-vue2模式不支持jsx语法，此处用v-html解决样式问题
			decimalPoint(val) {
				const splitPrice = (val.toString() || '0.00').split('.')
				const numb1 = splitPrice[0]
				let numb2 = '00'
				if (splitPrice.length > 1) {
					numb2 = splitPrice[1]
				}
				return `<view style="font-size: 12px;font-weight: bold">￥</view>${numb1}.<view style="font-size: 12px;">${numb2}</view>`
			},
			// 购物车数量的增加减少=>由于防止数据混乱和多次循环，导致索引不同，此处购物车和商品步进器事件分开写
			// 商品列表的
			listGoodsChange(e) {
				const num = e.value;
				const index = e.index;
				const id = this.slist[index].id;
				let key;
				if (num == 0) {
					// 找到相同id将购物车数组中对应项删除
					this.$store.state.carList.forEach((item, index) => {
						if (item.id == id) return key = index;
					})
					this.$store.state.carList.splice(key, 1);
				} else {
					// 不为0时同步数据
					this.$store.state.carList.forEach((item, index) => {
						if (item.id == id) item.number = num;
					})
				}
				this.cartLoading = false;
				this.$forceUpdate();
			},
			// 详情中购物车数量加了之后,上个页面店铺列表中的数量也要同步修改
			detailsSetShopList(id, type = false, num) {
				this.slist.forEach(item => {
					if (item.id == id) {
						if (type) {
							item.number += 1;
						} else {
							item.number = num;
						}
					}
				})
				this.$forceUpdate();
			},
			// 购物车的
			async listcartChange(e) {
				this.cartLoading = true;
				const num = e.value;
				const index = e.index;
				const id = this.$store.state.carList[index].id;
				if (num == 0) {
					// 在删除购物车数组前有限改变商品列表数组数据
					this.slist.forEach((item, index) => {
						if (item.id == id) {
							item.number = 0;
						}
					})
					// 为0时删除购物车内容
					this.$store.state.carList.splice(index, 1);
					// 需要关闭购物车之后再打开，否则数量显示会出现bug，估计需要换一个步进器
					this.carShow = false;
				} else {
					// 不为0时同步数据
					this.slist.forEach((item, index) => {
						if (item.id == id) item.number = num;
					})
				}
				this.cartLoading = false;
			},
			// 添加到购物车
			addCar(item, index) {
				// 新加的商品直接去赋值
				this.slist[index]['number'] = 1;
				console.log(item);
				this.$store.state.carList.push({
					...item
				});
			},
			// 清空购物车
			clearCartClick() {
				this.$store.state.carList = [];
				// 同步清理完商品列表的所有数据
				this.flist.forEach(item => {
					item.shopCommodities.forEach(items => {
						// 清空购物车时，初始化所有数据的number
						if (items.hasOwnProperty('number')) items.number = 0;
					})
				})
				this.carShow = false;
			},
			//获取店铺信息
			getShopInfoUserData(id) {
				this.$u.api.getShopInfoUser({
					id
				}).then(res => {
					let bgimageUrl = this.$ut.setImgae(res.dataList[0].image);
					this.shopInfo = {
						...res.dataList[0],
						bgimageUrl
					};
					this.isOpenSave = this.shopInfo.isOpenSave; // 是否是储蓄店铺
					this.isShopClose = this.shopInfo.isTrade == 0 ? true : false;
					this.itemList[0].body = this.shopInfo.introduction;
				})
			},
			//获取店铺的商品分类
			getShopCommodityTypeUserData(id) {
				this.$u.api.getShopCommodityTypeUser({
					shopId: id
				}).then(res => {
					// 由于瓜皮后端需要commodityId，故此处循环添加
					// currentId
					if (res.dataList == null) return this.$u.toast('店铺未设置分类或商品');
					res.dataList.forEach(item => {
						item.shopCommodities.forEach(items => {
							items.commodityId = items.id;
						})
					})
					this.currentId = res.dataList[0].id;
					console.log(this.currentId);
					this.flist = res.dataList;
					if(this.commodityId){
						// 当传入了商品id和商品分类id的时候，说明是推荐商品或者店铺点进来的，需要做特殊处理
						let tabtapList = [];
						this.flist.forEach(item=>{
							console.log(item);
							if(item.id == this.commodityTypeId){
								tabtapList.push(item);
							}
						})
						this.tabtap(tabtapList[0]);
					}else{
						this.tabtap(this.flist[0]);
					}
					
				})
			},
			// 打电话
			callTel(tel) {
				window.location.href = 'tel:' + tel;
			},
			//一级分类点击
			tabtap(item) {
				const {
					id,
					shopCommodities
				} = item;
				this.slist = shopCommodities;
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				this.currentId = id;
				// 滚动所需要的事件
				// let index = this.slist.findIndex(sitem=>sitem.commodityId === this.commodityId);
				// this.tabScrollTop = this.slist[index].top + 0.00001;
				console.log(this.tabScrollTop);
			},
			//右侧栏滚动
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].commodityTypeId;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach(item => {
					let view = uni.createSelectorQuery().in(this).select("#main-" + item.id);
					console.log(view,'view');
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += 106;
						// h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			navToList(sid) {
				if (this.isShopClose) return this.$u.toast('店铺已打烊');
				this.$ut.route('pages/product/product', {
					id: sid,
					isVip: this.isVip,
					type: 2,
					shopInfo: encodeURIComponent(JSON.stringify(this.shopInfo)),
				});
			},
			// 切换tab
			tabChange(index) {
				this.current = index;
				if (index == 2) {
					if (this.isOpenSave == 0) {
						this.isOpenSaveShow = true;
					}
				}
			},
			// 跳转到商品检索页
			navTogoodsList() {
				this.$ut.route('/pages/product/list');
			},
			changeColl(e) {
				if (e.show) {
					this.headStyle = {
						fontSize: '28rpx',
						fontWeight: 'bold'
					}
				} else {
					this.headStyle = {};
				}
			},

			// 标签分解-字符串转数组
			setTagtoArr(str) {
				const arr = str.split(',');
				return arr;
			}
		},
		// 混入顶部搜索框
		mixins: [searchData]
	}
</script>

<style lang="scss" scoped>
	.savingsPrice-box{
		background: linear-gradient(to bottom, #f96921, #f34c58);
		color: #fff;
		padding: 0 4rpx;
		
	}
	.sku-box {
		width: 600rpx;

		.tag-box {
			padding: 8rpx 18rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			font-size: 18rpx;
			border: 1rpx solid #fcbd71;
			display: inline-block;
			border-radius: 12rpx;
			position: relative;

			.tag-name {}

			.tag-price {
				&::before {
					content: '￥';
				}
			}
		}

		.is-current {
			color: #f90;
			background-color: #fdf6ec;
		}

		.chooice-box {
			background-color: rgb(250, 250, 250);
		}

		.sku-price {
			text-decoration: line-through;
		}

		.add-cart-btn {}
	}

	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		background-color: #fff;
		height: 100vh;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
		width: calc(100vw - 200rpx);
		height: calc(100vh);
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}

	.search-box {
		border-radius: 50px;
		padding: 8rpx 16rpx 8rpx 32rpx;
	}

	.img-box {
		background-color: #fd3a4c;
		width: 100vw;
		min-height: 300rpx;
		height: auto;
		background-size: cover;
	}

	.store-box {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-top: -30rpx;
		background-color: #fff;
		width: 100%;

		.evaluation-box {
			display: flex;
			align-items: flex-end;

			.score {
				color: #e29c51;
				font-size: 24rpx;
				font-weight: bold;
			}

			.sales {
				font-size: 24rpx;
				color: #999;
			}
		}

		.delivery {
			font-size: 24rpx;
			color: #999;
		}
	}

	.guess-item {
		display: flex;
		width: 100%;
		padding: 24rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 16rpx;

		&:nth-child(2n+1) {
			// margin-right: 4%;
		}
	}

	.image-wrapper {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		border: 1rpx dashed #eaeaea;

		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}

	.content-box {
		margin-left: 24rpx;
		flex: 1;

		.title {
			font-size: 28rpx;
			color: $font-color-dark;
		}

		.evaluation-box {
			display: flex;
			align-items: flex-end;


			.score {
				color: #e29c51;
				font-size: 28rpx;
				font-weight: bold;

				&::after {
					content: '分';
					font-size: 24rpx;
				}
			}

			.sales {
				font-size: 24rpx;
				color: #999;
			}
		}

		.delivery {
			font-size: 24rpx;
			color: #999;
		}

		.sku-box-btn {
			background-color: #2979ff;
			padding: 2rpx 12rpx;
			font-size: 24rpx;
			transform: scale(.9) translateY(4rpx);
			color: #fff;
			border-radius: 8rpx;
		}
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 10upx;
		/* #endif */
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 10086;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.clear-btn {
			position: absolute;
			left: 26upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			padding-left: 38upx;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 0 50px 50px 0;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: left;
			padding-right: 40upx;

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $font-color-dark;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			background: $uni-color-primary;
			box-shadow: 1px 2px 5px rgba($color: $uni-color-primary, $alpha: .72);
		}
	}

	.isShopClose {
		justify-content: center;
		background: rgba(0, 0, 0, .5);
		color: #fff
	}

	.scroll-Y {
		height: 500rpx;

		.list-box {
			border-radius: 20rpx;
			box-shadow: 0 0 10upx 0 rgba(0, 0, 0, .2);
		}

		.store-icon {
			background-color: #f6f4f4;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}

	.debitCard-box {
		margin-top: 30rpx;
		padding-top: 70rpx;
		background-color: #fff;

		.debitCard-style {
			background-image: url('@/static/images/debitCard_bg.jpg');
			background-size: cover;
			width: 686rpx;
			height: 431rpx;
			margin: 0 auto;
			color: #fff;
			position: relative;

			.cir-box {
				position: absolute;
				display: flex;
				align-items: center;
				top: 50rpx;
				left: 40rpx;

				.cir {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
					box-shadow: 0 0 20rpx rgba(255, 255, 255, .9);
				}
			}

			.saveMoney {
				position: absolute;
				top: 210rpx;
				left: 40rpx;

				&::before {
					content: '￥';
					font-size: 24rpx;
					margin-right: 12rpx;
				}
			}

			.shop-name {
				position: absolute;
				bottom: 56rpx;
				left: 40rpx;
			}
		}
	}


	::v-deep {
		.u-collapse-head {
			font-size: 24rpx;
		}

		.u-collapse-content {
			font-size: 24rpx;
		}

		.u-tab-item {
			color: #333 !important;
		}

		.u-icon-minus {
			background-color: transparent !important;
			border: 1rpx solid #e29c51 !important;
			border-radius: 50% !important;
			width: 36rpx !important;
			height: 36rpx !important;
			line-height: 36rpx !important;
			padding-top: 4rpx !important;
		}

		.u-number-input {
			background-color: transparent !important;
		}

		.u-icon-plus {
			background-color: #e29c51 !important;
			border: 1rpx solid #e29c51 !important;
			border-radius: 50% !important;
			width: 36rpx !important;
			height: 36rpx !important;
			line-height: 36rpx !important;
			padding-top: 4rpx !important;
		}

		.u-size-mini {
			padding: 6rpx 4rpx;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 160upx;
			height: 160upx;
			margin-bottom: 16rpx;
			border-radius: 8rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}
</style>